<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <button @click="changePerson">修改数组</button>
      <div>person:{{person}}</div>
    </div>
  </body>
</html>
<script>
  Vue.config.productionTip = false;
  const vm = new Vue({
    el: '#app',
    data() {
      return {
        person: ['小猫', '小兔', '小猪'],
      };
    },
    methods: {
      changePerson() {
        //1.直接通过下标修改数组：是不具备响应式的
        // this.person[0] = '小猪';
        //2.通过修改length来修改数据：是不具备响应式的
        // this.person.length = 1;
        //3.使用数组的方法修改数组的值，数组的方法分为两类：修改原数组和返回新数组
        //3.1 修改原数组方式（变更方法）如下： push pop shift unshift sort reverse splice
        // Vue将数组的变更方法进行了包裹，所以它们也将会触发视图更新
        // this.person.push('小鼠');
        //3.2 返回新数组：则可以直接替换原来的数组即可
        this.person = this.person.map((item) => {
          return item + '=';
        });
      },
    },
  });

  /* vue对数组变更方法包裹的伪代码 */
  function updateDOM() {
    // 更新DOM函数
  }

  // 保留旧的push方法
  const oldPush = Array.prototype.push;
  // 重写push方法
  Array.prototype.push = function (...rest) {
    // 调用旧的push方法
    oldPush.call(this, ...rest);
    //更新DOM
    updateDOM();
  };
</script>
